<!-- @format -->

<template>
  <UseSpace title="自定义添加和移除">
    <Form @submit="onSubmit" :initial-values="initialValues">
      <FieldArray name="links" v-slot="{ fields, push, remove }">
        <div v-for="(entry, idx) in fields" :key="entry.key">
          <Field :name="`links[${idx}]`" type="url" />
          <button type="button" @click="remove(idx)">Remove</button>
        </div>
        <button type="button" @click="push('')">Add</button>
      </FieldArray>
      <button>Submit</button>
    </Form>
  </UseSpace>
</template>
<script lang="ts" setup>
  import { Field, Form, FieldArray } from 'vee-validate'
  const initialValues = {
    links: ['https://github.com/logaretm'],
  }
  function onSubmit(values) {
    alert(JSON.stringify(values, null, 2))
  }
</script>
